<script>
import Header from "@/views/Components/Header/header.vue";
import Footer from "@/views/Components/Footer/footer.vue";
export default {
    name: "UserInfo",
    components: {
        Footer,
        Header
    },
    data() {
        return {
            userInfo: [],
            FHeight: "0",
            src: "https://images.pexels.com/photos/9450682/pexels-photo-9450682.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load",
            srcList: [
                "https://images.pexels.com/photos/9450682/pexels-photo-9450682.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load"
            ]
        }
    },
    methods: {
        /**
         * 点击跳转至个人信息页面
         */
        goToUserInfo() {
            if(this.$route.path !== "/info") {
                this.$router.push({
                    path: "/info"
                })
            }
        },
        /**
         * 点击跳转至修改密码页面
         */
        goToModifyPass() {
            if(this.$route.path !== "/modifyPass") {
                this.$router.push({
                    path: "/modifyPass"
                })
            }
        },
        /**
         * 点击跳转到收货地址页面
         */
        goToAddress() {
            if(this.$route.path !== "/userAddress") {
                this.$router.push({
                    path: "/userAddress"
                })
            }
        }
    },
    created() {
        this.userInfo = this.$store.getters.userInfo;
    }
}
</script>

<template>
    <div id="UserApp">
        <Header />
        <div class="UserContainer">
            <div class="contain">
                <div class="UserHeader">
                    <div class="wrapper_left">
                        <el-image fit="fill" :src="src"
                                  :preview-src-list="srcList"/>
                        <div class="Info">
                            <div class="one">{{ userInfo.username }}</div>
                            <div class="two">
                                <img v-if="userInfo.isVip === true" src="../../assets/icons/member.png" alt="">
                                <img v-if="userInfo.isVip === false" src="../../assets/icons/nomember.png" alt="">
                                <span v-if="userInfo.isVip === false">人很优质,可惜不是会员</span>
                                <span v-if="userInfo.isVip === true">人也优质,还是个会员</span>
                            </div>
                            <div class="three">相见很晚,不如早点相见</div>
                            <div class="four">
                                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="wrapper_right">
                        <div class="box">
                            <span>3</span>
                            <span>粉丝</span>
                        </div>
                        <div class="box">
                            <span>4</span>
                            <span>关注</span>
                        </div>
                        <div class="box">
                            <span>1</span>
                            <span>获赞</span>
                        </div>
                    </div>
                </div>
                <div class="UserBody">
                    <div class="bodyLeft">
                        <div class="leftTop">个人中心</div>
                        <div class="left_wrapper">
                            <div class="box" @click="goToUserInfo">
                                <img width="30" height="30" src="../../assets/icons/user.png" alt="">
                                <div>个人简介</div>
                            </div>
                            <div class="box" @click="goToModifyPass">
                                <img width="25" height="25" src="../../assets/icons/repass.png" alt="">
                                <div>修改密码</div>
                            </div>
                            <div class="box" @click="goToAddress">
                                <img width="25" height="25" src="../../assets/icons/address.png" alt="">
                                <div>收货地址</div>
                            </div>
                        </div>
                    </div>
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <Footer v-bind:FHeight="FHeight" PTop1="0" PTop2="50px" />
    </div>
</template>

<style scoped lang="scss">
@import url(../../assets/css/userinfo.css);
</style>
